<template>
	<div class="app-container">
		<div class="content">
			<div class="aside">
				<div class="tree-header">
					<span><svg-icon icon-class="type" class-name='type-class'/>&nbsp;&nbsp;患者列表</span>
				</div>
				<el-tree
					:data="gridData"
					:props="defaultProps"
					@node-click="handleXmxz"
					highlight-current:true
					check-on-click-node:true
					show-checkbox:true
					default-expand-all
					node-key="id"
					ref="tree"
					class="tree"
					:expand-on-click-node="false"
					highlight-current
					:render-content="treeRender">
					<span slot-scope="{ data }" :title="data.name">
					    <!-- //根节点 -->
						<span v-if="data.children != null"><i class="el-icon-folder"></i>&nbsp;&nbsp;{{
								data.name
							}}</span>
						<!-- 子级 -->
						<span v-else>{{ data.name }}</span>
					</span>
				</el-tree>
			</div>
			<el-container>
				<el-header height="50px" class="item-header">
					<div class="main-title">模板详情</div>
				</el-header>
				<el-table
					:data="temInfoData"
					style="width: 100%">
					<el-table-column
						prop="drugName"
						label="药品名称"
						width="180">
					</el-table-column>
					<el-table-column
						prop="remark"
						label="备注"
						width="180">
					</el-table-column>
					<el-table-column
						prop="createTime"
						label="创造时间">
					</el-table-column>
				</el-table>
				<template>
					<el-pagination
						class="fixedBottom"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="temInfo.pageNum"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="temInfo.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="infoTotalCount">
					</el-pagination>
				</template>
			</el-container>
		</div>
	</div>
</template>
<script>
import {getTemplateList, getTemInfo} from '@/api/template/template'

export default {
	data() {
		return {
			dialogVisible: false,
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			gridData: [],
			pageSize: 9999,
			totalCount: null,
			currentPage: 1,
			temInfo: {
				pageSize: 10,
				pageNum: 1
			},
			temInfoData: [],
			infoTotalCount: null
		}
	},

	created() {
		this.initData()
	},
	methods: {
		initData() {
			let params = {pageNum: this.currentPage, pageSize: this.pageSize}
			getTemplateList(params).then(res => {
				this.gridData = res.rows
				this.totalCount = res.total;
			})
		},
		handleXmxz(obj, node, data) {
			this.temInfo.templateId = obj.id
			getTemInfo(this.temInfo).then(res => {
				this.temInfoData = res.rows
				this.infoTotalCount = res.total
			});
		},
		handleSizeChange(val) {
			this.temInfo.pageNum = 1;
			this.temInfo.pageSize = val;

		},
		handleCurrentChange(val) {
			this.temInfo.pageSize = val;

		},
		delDrugType() {

		},
		updateDrugType() {

		},
		treeRender(h, {node, data, store}) {
			return (
				<span class="tree-node">
					<span>
						<svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-close"
								  v-show={!node.isLeaf && !node.expanded}></svg-icon>
						<svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-open"
								  v-show={!node.isLeaf && node.expanded}></svg-icon>
						<el-badge>
							<span>{node.label}</span>
						</el-badge>
					</span>
					<span v-show={node.isCurrent} style="margin-left: 20px;">
						<el-button title="修改" type="text" on-click={() => this.updateDrugType('updateTypeFrom')}>
							<i class="el-icon-edit "></i>
						</el-button>
						<el-button v-show={node.isLeaf} title="删除" type="text" on-click={() => this.delDrugType()}>
							<i class="el-icon-delete"></i>
						</el-button>
					</span>
				</span>
			);
		},
	}
}

</script>

<style lang="scss" scoped>
.content {
	margin: -20px;
	height: calc(100% + 40px);
	display: flex;

	.aside {
		flex: 0 280px;
		position: relative;
		box-shadow: 1px 0px 4px rgba(0, 21, 41, 0.08);

		.tree-header {
			position: absolute;
			height: 50px;
			width: 100%;
			font-size: 36upx;
			line-height: 30px;
			font-family: PingFangSC-Regular;
			padding: 10px 22px;
			box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
		}

		.tree {
			margin-top: 55px;
			font-size: 28upx;

			> > > .tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				padding-right: 8px;

				.el-button + .el-button {
					margin-left: 3px;
				}

			}
		}

	}

	.service-item {
		flex: 1;
	}
}

.el-icon-folder {
	color: #519eff;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 20px;
	box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);

	.main-title {
		font-family: PingFangSC-Light;
		line-height: 20px;
		font-size: 32upx;
		display: inline-block;
		margin-right: 12px;
		padding-left: 10px;
		border-left: 4px solid #1890FF;
	}
}

.fixedBottom {
	position: fixed;
	bottom: 20px;
}
</style>
